<template>
  <el-card
    class="dept-group-overview-2 work-bench-department__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 12px); padding: 10px 15px 0;"
  >
    <div class="dept-group-overview-2__header work-bench-department__card__header">
      <span class="work-bench-department__card__title dept-group-overview-2__title">班组概况</span>
    </div>
    <div v-if="list && list.length" class="work-bench-department__card__body dept-group-overview-2__body">
      <div class="dept-group-overview-2__organ-item-label organ-item-label">
        <div class="organ-item-label__title"></div>
        <div v-for="(content, contentIndex) in list[0].content" :key="contentIndex" class="organ-item-label__item">
          {{ content[0] }}
        </div>
      </div>
      <div v-for="item in list" :key="item.id" class="dept-group-overview-2__organ-item organ-item">
        <div class="organ-item__title">{{ item.groupName }}</div>
        <div v-for="(content, contentIndex) in item.content" :key="contentIndex" class="organ-item__item">
          {{ content[1] }}
        </div>
      </div>
    </div>
    <div class="dept-group-overview-2__no-data" v-else>
      <span>暂无数据!</span>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dashboardDeptApi from '@admin/views/Workbench/WorkbenchDepartment/api'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeptGroupOverview2',

  data() {
    return {
      list: [],
    }
  },

  props: {
    /**
     * 部门ID
     */
    organId: { type: String, default: '' },
  },

  methods: {
    /**
     * @function 班组概况
     * @param {String} organId -部门ID
     */
    queryDeptGroupOverview(organId) {
      if (!organId) return

      dashboardDeptApi.queryDeptGroupOverview({ organId }).then((res) => {
        this.list = res.content || []
        this.list.forEach((item) => {
          const keys = Object.keys(item.content)
          item.content = keys.map((key) => [key, item.content[key]])
        })
      })
    },
  },

  mounted() {
    this.queryDeptGroupOverview(this.organId)
  },

  watch: {
    organId(newVal) {
      this.queryDeptGroupOverview(newVal)
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
